@symbo.ls/datepicker 2.11.523 → 3.0.1

package/days.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export const DatePickerDay = {
-  extend: 'Button',
+  extends: 'Button',
   state: true,
 
   props: ({ state, key }) => {

package/grid.js

@@ -20,7 +20,7 @@ const extractMonthDays = (data) => {
 }
 
 export const DatePickerGrid = {
-  extend: 'Grid',
+  extends: 'Grid',
 
   props: {
     columns: 'repeat(7, 1fr)',
@@ -30,8 +30,9 @@ export const DatePickerGrid = {
     style: { scrollSnapAlign: 'center' }
   },
 
-  childExtend: DatePickerDay,
-  $stateCollection: ({ state }) => state.days
+  childExtends: DatePickerDay,
+  childrenAs: 'state',
+  children: ({ state }) => state.days
 }
 
 export const DatePickerGridContainer = {
@@ -84,24 +85,23 @@ export const DatePickerGridContainer = {
   },
 
   Flex: {
-    childExtend: {
-      extend: DatePickerGrid,
-      on: {
-        render: (el, state) => {
-          const { key } = el
-          const isSelected = state.parent.parent.activeMonth === parseInt(key)
-          if (isSelected) {
-            window.requestAnimationFrame(() => {
-              el.parent.parent.node.scrollTo({
-                left: el.node.offsetLeft,
-                behavior: state.initialized ? 'smooth' : 'instant'
-              })
+    childProps: {
+      onRender: (el, state) => {
+        const { key } = el
+        const isSelected = state.parent.parent.activeMonth === parseInt(key)
+        if (isSelected) {
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollTo({
+              left: el.node.offsetLeft,
+              behavior: state.initialized ? 'smooth' : 'instant'
             })
-            // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
-          }
+          })
+        // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
         }
       }
     },
-    $stateCollection: ({ state }) => state.parse()
+    childExtends: 'DatePickerGrid',
+    childrenAs: 'state',
+    children: ({ state }) => state.parse()
   }
 }

package/index.js

@@ -10,7 +10,7 @@ export * from './years'
 export * from './grid'
 
 export const DatePicker = {
-  extend: [Dialog, Flex],
+  extends: [Dialog, Flex],
 
   state: ({ props }) => {
     const date = new Date()
@@ -53,7 +53,7 @@ export const DatePicker = {
 }
 
 export const DatePickerTwoColumns = {
-  extend: DatePicker,
+  extends: DatePicker,
   DatePickerYears: {},
   Flex: {
     DatePickerMonthsSlider: {

package/months.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export const DatePickerMonthsSlider = {
-  extend: 'Flex',
+  extends: 'Flex',
   props: {
     position: 'relative',
     overflow: 'hidden',
@@ -76,7 +76,7 @@ export const DatePickerMonthsSlider = {
       '::-webkit-scrollbar': { display: 'none' }
     },
 
-    childExtend: {
+    childExtends: {
       tag: 'h6',
       props: ({ state, key }) => ({
         fontSize: 'Z1',
@@ -106,7 +106,7 @@ export const DatePickerMonthsSlider = {
       }
     },
 
-    $propsCollection: ({ state, parent }) => {
+    children: ({ state, parent }) => {
       return [
         { text: 'January' },
         { text: 'February' },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.523",
+  "version": "3.0.1",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "08e5b257605d1475f4628529f8e35373d87eb369",
+  "gitHead": "a4e7f586f7e4f60bd7b6a8388bdacc3ae1879433",
   "dependencies": {
-    "@symbo.ls/atoms": "^2.11.523",
-    "@symbo.ls/button": "^2.11.523",
-    "@symbo.ls/dialog": "^2.11.523",
+    "@symbo.ls/atoms": "^3.0.1",
+    "@symbo.ls/button": "^3.0.1",
+    "@symbo.ls/dialog": "^3.0.1",
     "headless-datepicker": "^1.0.1"
   },
   "source": "src/index.js"

package/weekdays.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export const DatePickerWeekDays = {
-  extend: 'Grid',
+  extends: 'Grid',
   props: {
     overflow: 'hidden',
     padding: '- Z A',
@@ -14,9 +14,9 @@ export const DatePickerWeekDays = {
       }
     }
   },
-  childExtend: {
+  childExtends: {
     tag: 'span',
-    extend: 'Flex',
+    extends: 'Flex',
     props: {
       fontSize: 'Y1',
       textTransform: 'capitalize',

package/years.js

@@ -43,8 +43,8 @@ export const DatePickerYears = {
       '::-webkit-scrollbar': { display: 'none' }
     },
 
-    childExtend: {
-      extend: 'Button',
+    childExtends: {
+      extends: 'Button',
       props: ({ state, text }) => ({
         fontSize: 'Y1',
         opacity: '.4',
@@ -69,7 +69,7 @@ export const DatePickerYears = {
       }
     },
 
-    $propsCollection: (element) => {
+    children: (element) => {
       const { yearRange } = element.state
       if (!yearRange) return